<template>
    <!-- 群聊中添加/移除群成员的组件 -->
    <div>
        <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" width="660px"
            @close="dialogConfig.show = false">
            <el-transfer v-model="formData.value.selectContacts" :titles="['全部', '已选']"
                :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }" :data="datalist"
                :props="{ key: 'userId', label: 'userName' }" filterable :filter-method="search">
                <template #default="{ option }">
                    <div class="select-item">
                        <div class="avatar">
                            <AvatarBase :userId="option.userId" :width="30" :borderRadius="5" :showDetail="false">
                            </AvatarBase>
                        </div>
                        <div class="nick-name">{{ option.userName }}</div>
                    </div>
                </template>
            </el-transfer>
        </Dialog>
    </div>
</template>

<script setup>
import AvatarBase from "@/components/AvatarBase.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "选择联系人",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});
const search = (query, item) => {
    return item.userName.toLowerCase().includes(query.toLowerCase());
};
const datalist = ref([]);
const formData = reactive({
});

const show = ({ contactList, groupId, opType }) => {
    dialogConfig.title = opType == "REMOVE" ? '移除群员' : '添加群员'
    dialogConfig.show = true
    datalist.value = contactList
    formData.value = {
        selectContacts: [],
        groupId, opType
    }
}

defineExpose({ show })

const emit = defineEmits(['callback'])
const submitData = async () => {
    if (formData.value.selectContacts.length == 0) {
        proxy.Message.warning('请选择联系人')
        return
    }
    let params = {}
    Object.assign(params, formData.value)
    // console.log("formData: ", formData.value)
    // console.log("params: ", params)
    params.contactIds = params.selectContacts.join(',')
    let result = await proxy.Request({
        method: 'post',
        url: proxy.Api.addOrRemoveGroupMember,
        params
    })
    if (!result) {
        return
    }
    dialogConfig.show = false
    emit('callback')
}
</script>

<style lang="scss" scoped>
.el-transfer {
    width: 100%;
    display: block !important;
    display: flex;

    :deep(.el-transfer-panel) {
        width: 260px;
    }

    :deep(.el-transfer-panel__item) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
    }
}

:deep(.el-transfer__buttons) {
    width: 60px;
    flex-direction: column;
    text-align: center;
    padding: 0px;

    .el-transfer__button {
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 5px;
        padding: 10px;
        height: 36px;
        border-radius: 50%;
    }
}

.select-item {
    display: flex;

    .avatar {
        width: 30px;
        height: 30px;
    }

    .nick-name {
        flex: 1;
        margin-left: 5px;
    }
}
</style>
